1
00:00:00,910 --> 00:00:05,030
[音乐]

2
00:00:05,040 --> 00:00:07,670
你好，欢迎光临，我是戴夫

3
00:00:07,680 --> 00:00:09,589
如果您是，本教程系列适合您

4
00:00:09,599 --> 00:00:10,950
刚刚开始你的旅程

5
00:00:10,960 --> 00:00:13,110
学习网页开发唯一

6
00:00:13,120 --> 00:00:15,430
前提是你会html

7
00:00:15,440 --> 00:00:18,710
首先是因为css应用于html

8
00:00:18,720 --> 00:00:20,470
如果您是，本课程也适合您

9
00:00:20,480 --> 00:00:22,150
寻找资源与他人分享

10
00:00:22,160 --> 00:00:23,750
刚刚开始他们的朋友

11
00:00:23,760 --> 00:00:25,990
学习网络开发的旅程

12
00:00:26,000 --> 00:00:28,070
或者您可能正在寻找复习知识

13
00:00:28,080 --> 00:00:29,669
当然，因为你之前学过

14
00:00:29,679 --> 00:00:32,229
一些CSS，但已经几个学期了

15
00:00:32,239 --> 00:00:34,630
or even years since you worked with it

16
00:00:34,640 --> 00:00:36,549
or maybe you have another reason that i

17
00:00:36,559 --> 00:00:38,950
haven't even thought of no matter you're

18
00:00:38,960 --> 00:00:40,630
欢迎，我希望我能帮助你

19
00:00:40,640 --> 00:00:42,950
我将在整个教程中进行旅程

20
00:00:42,960 --> 00:00:44,790
mention references and tools and i'll

21
00:00:44,800 --> 00:00:46,790
提供我提到的所有内容的链接

22
00:00:46,800 --> 00:00:48,790
the description below so let's get

23
00:00:48,800 --> 00:00:51,830
开始学习CSS

24
00:00:51,840 --> 00:00:54,869
什么是CSS

25
00:00:54,879 --> 00:00:57,350
css is an acronym that stands for

26
00:00:57,360 --> 00:01:01,110
cascading style sheets so css is a

27
00:01:01,120 --> 00:01:02,869
stylesheet language that's used to

28
00:01:02,879 --> 00:01:05,270
describe the presentation of a document

29
00:01:05,280 --> 00:01:08,310
it's most known for being used with html

30
00:01:08,320 --> 00:01:10,390
虽然它可以应用于其他

31
00:01:10,400 --> 00:01:14,710
像你在这里看到的媒体我有 xml svg

32
00:01:14,720 --> 00:01:18,070
mathml xhtml 和列出的其他内容

33
00:01:18,080 --> 00:01:20,870
此处用于纸质演讲其他媒体

34
00:01:20,880 --> 00:01:24,149
但我们现在将使用 html

35
00:01:24,159 --> 00:01:25,429
when we think about the difference

36
00:01:25,439 --> 00:01:27,830
html 和 css 之间

37
00:01:27,840 --> 00:01:30,870
consider html as the foundation and

38
00:01:30,880 --> 00:01:32,950
结构，所以如果你考虑一个新的

39
00:01:32,960 --> 00:01:35,350
建筑物或正在建造的房屋

40
00:01:35,360 --> 00:01:37,910
and you see that structure go up

41
00:01:37,920 --> 00:01:40,069
这是一切的基础

42
00:01:40,079 --> 00:01:44,149
that holds it together however the css

43
00:01:44,159 --> 00:01:45,590
是

44
00:01:45,600 --> 00:01:48,789
油漆、地毯和壁纸

45
00:01:48,799 --> 00:01:51,270
或任何任何装饰品任何东西

46
00:01:51,280 --> 00:01:54,149
这使得它看起来不错，所以结构

47
00:01:54,159 --> 00:01:55,590
holds it all together it's the

48
00:01:55,600 --> 00:01:58,950
CSS 才是真正的基础

49
00:01:58,960 --> 00:02:02,149
the appearance that actual presentation

50
00:02:02,159 --> 00:02:04,469
of the building or in our case we're

51
00:02:04,479 --> 00:02:06,950
working with documents okay now before

52
00:02:06,960 --> 00:02:09,830
we start writing css let's get the tools

53
00:02:09,840 --> 00:02:12,949
we need and first of all i will be using

54
00:02:12,959 --> 00:02:15,430
the chrome browser in this course so you

55
00:02:15,440 --> 00:02:18,070
如果没有的话可以下载chrome

56
00:02:18,080 --> 00:02:20,150
来自 google.com

57
00:02:20,160 --> 00:02:22,470
chrome 并且它应该可用于

58
00:02:22,480 --> 00:02:24,869
每个平台，它可能会

59
00:02:24,879 --> 00:02:27,270
确定您在这里的平台是什么

60
00:02:27,280 --> 00:02:28,150
嗯

61
00:02:28,160 --> 00:02:30,309
之后我们将使用

62
00:02:30,319 --> 00:02:32,630
集成开发环境

63
00:02:32,640 --> 00:02:34,550
真正的代码编辑器

64
00:02:34,560 --> 00:02:37,110
我们将使用的是 Visual Studio

65
00:02:37,120 --> 00:02:41,430
代码，位于 code.visualstudio.com

66
00:02:41,440 --> 00:02:43,589
它还应该识别什么平台

67
00:02:43,599 --> 00:02:45,509
你已经开启了，但如果还没有开启

68
00:02:45,519 --> 00:02:47,990
可以点击其他平台即可

69
00:02:48,000 --> 00:02:50,550
为所有不同的平台找到它

70
00:02:50,560 --> 00:02:53,030
我们可能正在使用 好吧，继续

71
00:02:53,040 --> 00:02:55,030
并下载您需要的版本，如果

72
00:02:55,040 --> 00:02:56,869
你还需要 chrome 下载它

73
00:02:56,879 --> 00:02:59,270
安装软件然后回来

74
00:02:59,280 --> 00:03:01,190
到视频好了，此时我

75
00:03:01,200 --> 00:03:03,270
假设你已经拥有了一切

76
00:03:03,280 --> 00:03:05,270
下载并安装，现在我已经

77
00:03:05,280 --> 00:03:07,350
在这里打开 Visual Studio 代码

78
00:03:07,360 --> 00:03:09,589
你可能会看到一个我关闭的欢迎屏幕

79
00:03:09,599 --> 00:03:12,229
已经出来了但是你需要做什么

80
00:03:12,239 --> 00:03:14,630
如果你还没有创建一个

81
00:03:14,640 --> 00:03:17,509
计算机上项目的文件夹

82
00:03:17,519 --> 00:03:19,190
在本课中，您可能会想要

83
00:03:19,200 --> 00:03:21,430
为每节课创建一个新文件夹或

84
00:03:21,440 --> 00:03:23,750
至少以以下课程为基础

85
00:03:23,760 --> 00:03:26,149
无论哪种方式，您都需要一个文件夹

86
00:03:26,159 --> 00:03:27,830
我们要做的第一件事是

87
00:03:27,840 --> 00:03:31,190
创建一个index.html文件，因为一旦

88
00:03:31,200 --> 00:03:33,990
我们将再次申请

89
00:03:34,000 --> 00:03:36,630
我们的 css 到 html

90
00:03:36,640 --> 00:03:38,550
现在如果你不熟悉图像

91
00:03:38,560 --> 00:03:40,869
快捷方式我们可以采取图像快捷方式

92
00:03:40,879 --> 00:03:43,589
这里可以快速创建一个html文档

93
00:03:43,599 --> 00:03:44,789
只需输入

94
00:03:44,799 --> 00:03:47,350
感叹号并按

95
00:03:47,360 --> 00:03:48,390
输入

96
00:03:48,400 --> 00:03:50,309
现在这给了我们

97
00:03:50,319 --> 00:03:53,670
一个非常基本的 html 文档，当然

98
00:03:53,680 --> 00:03:56,149
它只有一个文档标题它有一个

99
00:03:56,159 --> 00:03:58,149
您可能会在这里添加几个元标记

100
00:03:58,159 --> 00:03:59,429
没见过

101
00:03:59,439 --> 00:04:01,509
但他们很方便继续离开

102
00:04:01,519 --> 00:04:03,830
在页面中我们现在想要做什么

103
00:04:03,840 --> 00:04:05,990
只是放一些内容所以让我们放一个

104
00:04:06,000 --> 00:04:09,030
这里的段落让我们说

105
00:04:09,040 --> 00:04:10,710
我正在学习

106
00:04:10,720 --> 00:04:14,070
css带感叹号并保存

107
00:04:14,080 --> 00:04:16,150
这确实是我们所需要的

108
00:04:16,160 --> 00:04:18,469
现在的html文档有

109
00:04:18,479 --> 00:04:21,430
三种不同的方式将CSS应用到我们的

110
00:04:21,440 --> 00:04:23,350
文档有外部样式

111
00:04:23,360 --> 00:04:25,670
我们可以有一个内部样式

112
00:04:25,680 --> 00:04:29,030
工作表或者我们可以应用 css 内联

113
00:04:29,040 --> 00:04:31,830
一个元素让我们看看每个选项

114
00:04:31,840 --> 00:04:34,230
我将从外部风格开始

115
00:04:34,240 --> 00:04:37,110
工作表，所以我想创建一个链接元素

116
00:04:37,120 --> 00:04:40,070
在这里，我将按 Tab 键和视觉

117
00:04:40,080 --> 00:04:41,749
工作室代码已经帮助我们解决了这个问题

118
00:04:41,759 --> 00:04:43,430
给我们 rel 属性，表示

119
00:04:43,440 --> 00:04:45,430
这是一个样式表，我们需要链接

120
00:04:45,440 --> 00:04:47,430
到样式表，但我们还没有创建

121
00:04:47,440 --> 00:04:49,670
在文件树中还有一个

122
00:04:49,680 --> 00:04:52,230
让我们创建一个新目录并为其命名

123
00:04:52,240 --> 00:04:53,670
CSS

124
00:04:53,680 --> 00:04:56,390
现在在 css 目录中

125
00:04:56,400 --> 00:04:58,230
让我们继续创建一个新文件

126
00:04:58,240 --> 00:05:01,909
命名为 style.css

127
00:05:01,919 --> 00:05:04,710
现在我们有了样式表文件

128
00:05:04,720 --> 00:05:07,749
在里面让我们为我们的

129
00:05:07,759 --> 00:05:09,350
段落元素

130
00:05:09,360 --> 00:05:11,029
花括号

131
00:05:11,039 --> 00:05:13,990
现在一回来我们就继续

132
00:05:14,000 --> 00:05:16,710
在这里放置一个样式，这将是一个规则

133
00:05:16,720 --> 00:05:19,350
实际上或声明（如果您愿意的话）

134
00:05:19,360 --> 00:05:22,070
让我们改变我们的颜色

135
00:05:22,080 --> 00:05:24,950
段落，让我们把它变成紫色

136
00:05:24,960 --> 00:05:28,070
以分号结束并保存这是

137
00:05:28,080 --> 00:05:31,029
现在非常非常简单的样式表

138
00:05:31,039 --> 00:05:33,830
现在回到我们的 html 我们可以继续

139
00:05:33,840 --> 00:05:36,230
并通过放置链接到该样式表

140
00:05:36,240 --> 00:05:38,550
在css目录下可以看到

141
00:05:38,560 --> 00:05:40,469
Visual Studio Code 希望帮助我们

142
00:05:40,479 --> 00:05:42,710
所以我们点击它然后它就会知道

143
00:05:42,720 --> 00:05:45,110
style.css 就在那里，所以我们可以

144
00:05:45,120 --> 00:05:46,390
点击那个

145
00:05:46,400 --> 00:05:48,310
现在应该链接

146
00:05:48,320 --> 00:05:49,830
你可能会看到

147
00:05:49,840 --> 00:05:52,870
一些具有类型的旧代码

148
00:05:52,880 --> 00:05:54,390
属性在这里

149
00:05:54,400 --> 00:05:55,189
但是

150
00:05:55,199 --> 00:05:57,909
mozilla 现在指出这不是

151
00:05:57,919 --> 00:06:00,309
需要更长的时间，实际上是一种

152
00:06:00,319 --> 00:06:02,629
不赞成，所以我们不想

153
00:06:02,639 --> 00:06:04,870
包括它，但您可能会看到较旧的代码

154
00:06:04,880 --> 00:06:06,710
有了它，它不会破坏代码，如果

155
00:06:06,720 --> 00:06:08,309
它就在那儿，就在那里

156
00:06:08,319 --> 00:06:10,710
不是现代的做法

157
00:06:10,720 --> 00:06:13,270
有我们到样式表的链接

158
00:06:13,280 --> 00:06:15,990
现在我们还没有做的一件事是添加

159
00:06:16,000 --> 00:06:18,550
实时服务器扩展所以如果你

160
00:06:18,560 --> 00:06:20,710
没有点击扩展程序

161
00:06:20,720 --> 00:06:22,710
图标在左边

162
00:06:22,720 --> 00:06:24,870
然后在搜索扩展中输入

163
00:06:24,880 --> 00:06:25,830
直播

164
00:06:25,840 --> 00:06:27,189
服务器

165
00:06:27,199 --> 00:06:29,430
当这些选项出现时我们应该

166
00:06:29,440 --> 00:06:32,230
看到 ritwik 日的一篇，你想

167
00:06:32,240 --> 00:06:34,950
选择那个然后你想去

168
00:06:34,960 --> 00:06:37,189
继续并安装

169
00:06:37,199 --> 00:06:39,029
我已经安装了它，所以我

170
00:06:39,039 --> 00:06:40,950
不需要这样做，但这会让

171
00:06:40,960 --> 00:06:44,629
我们不仅推出我们的 html 和 css，而且

172
00:06:44,639 --> 00:06:47,029
任何时候我们进行更改并保存

173
00:06:47,039 --> 00:06:49,270
将立即重新加载，就像

174
00:06:49,280 --> 00:06:51,189
在您不想加载的网络服务器上

175
00:06:51,199 --> 00:06:53,430
这些文件直接进入您的浏览器

176
00:06:53,440 --> 00:06:55,589
从您想要的硬盘驱动器

177
00:06:55,599 --> 00:06:57,430
确实有发展

178
00:06:57,440 --> 00:06:59,749
模拟 Web 服务器的环境

179
00:06:59,759 --> 00:07:01,430
这就是实时服务器为您所做的

180
00:07:01,440 --> 00:07:03,670
所以继续安装吧

181
00:07:03,680 --> 00:07:05,749
一旦你安装了它，我就会

182
00:07:05,759 --> 00:07:08,230
单击此处的探索图标即可

183
00:07:08,240 --> 00:07:10,230
再次查看我们的文件，但现在您将

184
00:07:10,240 --> 00:07:12,150
Visual Studio Code 中有一些选项

185
00:07:12,160 --> 00:07:13,990
您可以点击此处的“直播”

186
00:07:14,000 --> 00:07:15,270
右下角

187
00:07:15,280 --> 00:07:16,629
它说

188
00:07:16,639 --> 00:07:18,469
当我们鼠标点击运行实时服务器

189
00:07:18,479 --> 00:07:20,950
或者您可以右键单击

190
00:07:20,960 --> 00:07:23,430
文件，您可以选择实时打开

191
00:07:23,440 --> 00:07:25,589
服务器，我现在就开始做

192
00:07:25,599 --> 00:07:28,790
在那里我们有非常非常基本的

193
00:07:28,800 --> 00:07:30,950
网页但我们可以看到它是超级

194
00:07:30,960 --> 00:07:32,710
小我不知道你是否能看到

195
00:07:32,720 --> 00:07:34,710
我必须放大

196
00:07:34,720 --> 00:07:37,670
但它说我正在学习 css 所以我们

197
00:07:37,680 --> 00:07:40,629
可以在我们的风格中添加另一种风格

198
00:07:40,639 --> 00:07:41,510
片材

199
00:07:41,520 --> 00:07:43,589
让我们继续把它放在上面

200
00:07:43,599 --> 00:07:45,110
颜色风格

201
00:07:45,120 --> 00:07:47,990
我会输入字体破折号大小，然后我

202
00:07:48,000 --> 00:07:50,869
将其更改为 64 像素

203
00:07:50,879 --> 00:07:53,749
现在应该很大了所以我会保存

204
00:07:53,759 --> 00:07:56,230
调整 Visual Studio 代码大小

205
00:07:56,240 --> 00:07:58,629
好多了，所以我们有紫色的我

206
00:07:58,639 --> 00:08:01,670
现在让我们学习大字体的CSS

207
00:08:01,680 --> 00:08:04,309
返回到 html 文件

208
00:08:04,319 --> 00:08:06,710
我要扩大视觉工作室

209
00:08:06,720 --> 00:08:08,469
再次编码，这样我们就有更多空间

210
00:08:08,479 --> 00:08:10,550
现在在这个头部部分

211
00:08:10,560 --> 00:08:13,670
就在我们的链接元素下面

212
00:08:13,680 --> 00:08:16,309
要输入样式并按 Tab 键并

213
00:08:16,319 --> 00:08:19,110
有一种东西叫做样式元素

214
00:08:19,120 --> 00:08:22,070
现在位于此处的样式元素内部

215
00:08:22,080 --> 00:08:23,990
在开始标签和结束标签之间

216
00:08:24,000 --> 00:08:27,589
那就是我们可以写CSS所以我也是

217
00:08:27,599 --> 00:08:29,990
打算设置段落样式

218
00:08:30,000 --> 00:08:32,870
在这里我要放置颜色

219
00:08:32,880 --> 00:08:35,029
如柠檬绿

220
00:08:35,039 --> 00:08:37,350
现在我会保存这个，然后让我们回去

221
00:08:37,360 --> 00:08:40,149
查看我们的页面，看看我们有什么

222
00:08:40,159 --> 00:08:43,430
现在我正在学习 css，它是

223
00:08:43,440 --> 00:08:46,150
石灰绿注意它仍然是大字体

224
00:08:46,160 --> 00:08:48,630
不过，我会使用其他样式表

225
00:08:48,640 --> 00:08:50,630
按 ctrl b 隐藏 a 的文件树

226
00:08:50,640 --> 00:08:52,630
第二，这样我们可以更好地看到这一点

227
00:08:52,640 --> 00:08:55,750
其他样式表仍在应用中

228
00:08:55,760 --> 00:08:58,550
但我们已经覆盖了紫色规则

229
00:08:58,560 --> 00:09:01,350
对于绿色的颜色

230
00:09:01,360 --> 00:09:03,590
现在有人优先于

231
00:09:03,600 --> 00:09:05,110
其他的

232
00:09:05,120 --> 00:09:07,430
内部样式表就是我们

233
00:09:07,440 --> 00:09:09,269
刚刚在这里建造的风格

234
00:09:09,279 --> 00:09:11,350
内部的元素可以做到这一点

235
00:09:11,360 --> 00:09:14,070
优先于外部不

236
00:09:14,080 --> 00:09:15,110
真的

237
00:09:15,120 --> 00:09:17,670
只是它被解释为另一种风格

238
00:09:17,680 --> 00:09:20,310
现在我通常使用两种方式

239
00:09:20,320 --> 00:09:22,790
外部样式表，但没有

240
00:09:22,800 --> 00:09:25,190
浏览器的差异

241
00:09:25,200 --> 00:09:27,269
所关心的不同之处在于

242
00:09:27,279 --> 00:09:29,990
级联或它们的顺序

243
00:09:30,000 --> 00:09:32,949
读所以它读这个样式表

244
00:09:32,959 --> 00:09:34,150
第一

245
00:09:34,160 --> 00:09:36,630
然后它最后读了这个，所以

246
00:09:36,640 --> 00:09:38,949
它在我们的段落中看到的最后一种颜色

247
00:09:38,959 --> 00:09:41,590
是柠檬绿我们可以进一步强调

248
00:09:41,600 --> 00:09:42,470
那个

249
00:09:42,480 --> 00:09:45,110
通过突出显示我们的链接元素和

250
00:09:45,120 --> 00:09:47,590
用 ctrl x 剪切它

251
00:09:47,600 --> 00:09:49,910
然后用control v粘贴

252
00:09:49,920 --> 00:09:51,269
在下面

253
00:09:51,279 --> 00:09:53,670
我们的内部样式表

254
00:09:53,680 --> 00:09:56,310
所以现在我们的外部样式表是

255
00:09:56,320 --> 00:09:59,430
读到最后，我会保存

256
00:09:59,440 --> 00:10:01,430
现在我们有一个紫色我正在学习

257
00:10:01,440 --> 00:10:05,350
再次css以及应用css的最终方式

258
00:10:05,360 --> 00:10:08,150
html 文档内部是内联的

259
00:10:08,160 --> 00:10:11,430
css 这确实不是这样做的方法

260
00:10:11,440 --> 00:10:13,590
虽然你真的想避免内联

261
00:10:13,600 --> 00:10:15,750
css 如果可以的话我只想

262
00:10:15,760 --> 00:10:17,509
展示它是什么

263
00:10:17,519 --> 00:10:19,269
因为你可以使用样式作为

264
00:10:19,279 --> 00:10:21,829
属性，现在我们不需要

265
00:10:21,839 --> 00:10:24,550
选择器，就是上面的 p

266
00:10:24,560 --> 00:10:26,790
这是选择我们的段落

267
00:10:26,800 --> 00:10:27,990
已经知道它被应用于

268
00:10:28,000 --> 00:10:30,710
所以这里我只说颜色

269
00:10:30,720 --> 00:10:32,949
我想说蓝色我真的不喜欢

270
00:10:32,959 --> 00:10:34,870
需要一个分号，因为我没有

271
00:10:34,880 --> 00:10:37,030
如果我还有更多的话，这里还有其他声明吗

272
00:10:37,040 --> 00:10:39,430
比一个我之间有一个分号

273
00:10:39,440 --> 00:10:41,590
现在如果我保存这个

274
00:10:41,600 --> 00:10:44,069
注意这里现在是蓝色的

275
00:10:44,079 --> 00:10:46,790
这确实优先于任何一个

276
00:10:46,800 --> 00:10:49,030
内部或外部样式表的类型

277
00:10:49,040 --> 00:10:51,430
因为它直接应用于

278
00:10:51,440 --> 00:10:54,389
元素本身，但我们想要的是

279
00:10:54,399 --> 00:10:57,590
关注点分离是最好的方法

280
00:10:57,600 --> 00:11:01,190
常用的方式是

281
00:11:01,200 --> 00:11:04,630
外部样式表它保留你的CSS

282
00:11:04,640 --> 00:11:08,150
代码与您的 html 完全分开

283
00:11:08,160 --> 00:11:10,630
好吧，让我们删除内联样式

284
00:11:10,640 --> 00:11:12,550
从该段落

285
00:11:12,560 --> 00:11:14,790
我们还删除 style 元素

286
00:11:14,800 --> 00:11:17,190
因为我们将专注于使用

287
00:11:17,200 --> 00:11:19,430
其余部分的外部样式表

288
00:11:19,440 --> 00:11:21,990
课程，这样我们就可以保存它

289
00:11:22,000 --> 00:11:23,670
让我们继续向上滚动到

290
00:11:23,680 --> 00:11:26,230
html 文档的顶部，现在让我们

291
00:11:26,240 --> 00:11:29,269
移至外部样式表

292
00:11:29,279 --> 00:11:31,670
然后在浏览器中当然会注意到

293
00:11:31,680 --> 00:11:34,310
现在已经回到紫色了

294
00:11:34,320 --> 00:11:36,389
转到另一个 mdn 页面

295
00:11:36,399 --> 00:11:39,030
mozilla 开发者网络，我们得到了

296
00:11:39,040 --> 00:11:41,990
CSS 规则集的剖析让我们来打破

297
00:11:42,000 --> 00:11:43,750
这个下来我们可以看看我们自己的

298
00:11:43,760 --> 00:11:46,150
左边的例子也是如此，但我们有

299
00:11:46,160 --> 00:11:48,630
我们的选择器意味着我们正在选择

300
00:11:48,640 --> 00:11:51,350
如果我们有一个或多个段落

301
00:11:51,360 --> 00:11:52,710
不止一个

302
00:11:52,720 --> 00:11:55,269
现在我们有一处房产和一处房产

303
00:11:55,279 --> 00:11:57,430
值，因此属性是颜色

304
00:11:57,440 --> 00:11:59,750
正在读取的值，然后

305
00:11:59,760 --> 00:12:01,350
声明

306
00:12:01,360 --> 00:12:03,190
是财产和财产价值

307
00:12:03,200 --> 00:12:04,790
在一起，所以我们有同样的事情

308
00:12:04,800 --> 00:12:06,310
这里只是颜色

309
00:12:06,320 --> 00:12:08,790
和紫色，完整的声明是

310
00:12:08,800 --> 00:12:11,350
现在它说整个结构是

311
00:12:11,360 --> 00:12:13,670
称为规则集，但也要注意它

312
00:12:13,680 --> 00:12:16,310
表示经常提到术语“规则集”

313
00:12:16,320 --> 00:12:19,190
按照规则，这样你就可以考虑

314
00:12:19,200 --> 00:12:21,110
这是一个CSS

315
00:12:21,120 --> 00:12:23,990
如果你愿意的话，规则让我们回到

316
00:12:24,000 --> 00:12:26,629
我们在浏览器中的 html 文档以及

317
00:12:26,639 --> 00:12:30,150
关于CSS我需要注意一些事情

318
00:12:30,160 --> 00:12:32,870
它使用的是美式拼写吗

319
00:12:32,880 --> 00:12:34,790
颜色 可能还有其他英文单词

320
00:12:34,800 --> 00:12:36,389
是不同的，但请注意视觉效果

321
00:12:36,399 --> 00:12:38,150
工作室代码知道已经有一个

322
00:12:38,160 --> 00:12:40,870
这里有问题，如果我保存这个

323
00:12:40,880 --> 00:12:43,269
紫色未应用于我们的文档

324
00:12:43,279 --> 00:12:46,550
它回到默认的黑色文本所以

325
00:12:46,560 --> 00:12:49,350
我们需要用美国拼写东西

326
00:12:49,360 --> 00:12:51,190
我想英语是最好的表达方式

327
00:12:51,200 --> 00:12:54,310
这是我们的方言，颜色中没有 u

328
00:12:54,320 --> 00:12:55,750
可能还有其他一些词，例如

329
00:12:55,760 --> 00:12:58,470
好吧，但请注意我们没有收到错误

330
00:12:58,480 --> 00:13:00,790
或者如果我们给它加上颜色的话

331
00:13:00,800 --> 00:13:02,069
错误的方式

332
00:13:02,079 --> 00:13:04,790
它只是被忽略了，这就是

333
00:13:04,800 --> 00:13:07,509
关于CSS，有时很难

334
00:13:07,519 --> 00:13:09,269
检测你何时做错事

335
00:13:09,279 --> 00:13:11,350
因为你没有收到错误

336
00:13:11,360 --> 00:13:13,670
像编程语言一样抛出

337
00:13:13,680 --> 00:13:16,150
我应该说不是的规则或声明

338
00:13:16,160 --> 00:13:18,470
整个规则，但这个声明是

339
00:13:18,480 --> 00:13:20,790
只是因为我们没有而被忽视

340
00:13:20,800 --> 00:13:24,310
按照 css 期望的方式拼写颜色，所以如果

341
00:13:24,320 --> 00:13:26,150
我再次把它改回来

342
00:13:26,160 --> 00:13:29,590
紫色文本现在是我们检测的一种方式

343
00:13:29,600 --> 00:13:33,030
我们的CSS中的问题是验证我们的

344
00:13:33,040 --> 00:13:35,990
css 文件，所以让我们拉出一个页面

345
00:13:36,000 --> 00:13:37,269
会那么做

346
00:13:37,279 --> 00:13:38,629
我们去

347
00:13:38,639 --> 00:13:42,550
w3c 的 css 验证服务是

348
00:13:42,560 --> 00:13:45,110
万维网联盟和我们

349
00:13:45,120 --> 00:13:46,389
想要选择

350
00:13:46,399 --> 00:13:49,590
通过上传文件我们可以选择

351
00:13:49,600 --> 00:13:53,269
我们文件夹中的 css style.css 和您

352
00:13:53,279 --> 00:13:55,990
需要选择文件然后浏览到

353
00:13:56,000 --> 00:13:58,470
你的css所在的文件夹

354
00:13:58,480 --> 00:14:00,230
应该在您创建的文件夹中并且

355
00:14:00,240 --> 00:14:02,389
那么如果你创建了一个 css 文件夹

356
00:14:02,399 --> 00:14:05,350
那里是我的 style.css 所以

357
00:14:05,360 --> 00:14:06,710
我会选择它

358
00:14:06,720 --> 00:14:08,230
并选择打开

359
00:14:08,240 --> 00:14:10,310
现在我们只需点击检查

360
00:14:10,320 --> 00:14:12,389
按钮，此页面将向我们显示是否

361
00:14:12,399 --> 00:14:14,069
有任何错误，但如果没有

362
00:14:14,079 --> 00:14:16,470
你应该得到这个祝贺 不

363
00:14:16,480 --> 00:14:19,269
错误发现消息就像我一样，所以我

364
00:14:19,279 --> 00:14:22,150
将把这个 css 验证器的链接放在

365
00:14:22,160 --> 00:14:24,150
视频的描述或

366
00:14:24,160 --> 00:14:26,870
资源，然后在下一个视频中

367
00:14:26,880 --> 00:14:29,110
我们将学习有关 css 的所有内容

368
00:14:29,120 --> 00:14:31,590
选择者记住要不断努力

369
00:14:31,600 --> 00:14:33,990
超越完美还有一点进步

370
00:14:34,000 --> 00:14:36,230
每天进步都会走很长

371
00:14:36,240 --> 00:14:37,110
方式

372
00:14:37,120 --> 00:14:38,710
如果是的话请给这个视频点个赞

373
00:14:38,720 --> 00:14:40,949
对您有帮助，感谢您的观看

374
00:14:40,959 --> 00:14:42,629
订阅你就是在帮助我

375
00:14:42,639 --> 00:14:45,430
频道成长祝您有美好的一天，让我们

376
00:14:45,440 --> 00:14:49,519
很快就会一起编写更多代码